<template>
    <div>
<van-nav-bar
  title="个人信息"
  left-arrow
  @click-left="onClickLeft"
/>
    <van-cell-group>
<!-- <img class="imgs"    :src="$store.state.user.avatar"/> -->
<van-uploader :after-read="Uploader" >
     <img width="37px" :src="data.avatar" alt="">
</van-uploader>
  <van-cell title="头像" :value="$store.state.user.avatar" is-link />
  <van-cell title="昵称" :value="$store.state.user.nickname"  is-link />
  <van-cell title="手机号" :value="$store.state.user.mobile"  is-link />
  <van-cell title="性别" value="保密"  is-link />
  <van-cell is-link title="所在城市" @click="show = true" />
  <van-action-sheet v-model="show"  title="标题">
  <div class="content">
      <van-area title="标题" :area-list="areaList" value="110101" />
  </div>
</van-action-sheet>
  <van-cell title="所在城市" value="请选择"  is-link />
  <van-cell title="学科" value=""  is-link />
  <van-cell title="年级" value="请选择"  is-link />
</van-cell-group>
    </div>
</template>
<script>
import {upimg} from '@/request/http.js'
import { navBar,cellGroup,Cell,actionSheet,Area,uploader } from "vant";
export default {
     components: {
    [navBar.name]: navBar,
    [cellGroup.name]: cellGroup,
    [Cell.name]: Cell,
    [actionSheet.name]: actionSheet,
    [Area.name]: Area,
    [uploader.name]: uploader,

  },
    data() {
        return {
            show: false,
            areaList:
                {
  province_list: {
    110000: '北京市',
    120000: '天津市'
  },
  city_list: {
    110100: '北京市',
    110200: '县',
    120100: '天津市',
    120200: '县'
  },
  county_list: {
    110101: '东城区',
    110102: '西城区',
    110105: '朝阳区',
    110106: '丰台区',
    120101: '和平区',
    120102: '河东区',
    120103: '河西区',
    120104: '南开区',
    120105: '河北区',
    // ....
  }
},
data:{
    avatar:this.$store.state.user.avatar,
}
           
        };
    },
    created() {

    },
    mounted() {
        console.log(this.$store.state.user)
    },
    methods: {
        onClickLeft(){
            this.$router.push("/mine")
        },
         // 上传图片
    Uploader(e){
      console.log(e)
      let content = e.file;
      
      let data = new FormData();
      // FormData 对象的使用：
      // 1.用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成一个queryString
      // 2. 异步上传二进制文件。
      //上传图片需要转换二进制这里要用到FormData
      
      data.append('file',content);
      console.log(content)
      //这里的file表示给后台传的属性名字，这里看接口文档需要传的的属性
      
      upimg(data).then(res=>{
      //upimg是封装的请求方法，这里自己改一下就可以，没封装可以用this.$axios
      
        console.log(res)
       
        //res返回上传的图片的路径等信息
        this.data.avatar = res.path
      })
    }
    }
};
</script>

<style scoped>
.content {
    padding: 16px 16px 160px;
  }
.imgs{
    width:30px;
    height:30px;
    position: absolute;
    top:30px;
    right:15px;
}
</style>
